<template>
  <div class="base-query-page">
    <base-query-layout :show-query="showQuery">
      <!--表单查询插槽-->
      <template v-if="showQuery" #query>
        <slot name="query"></slot>
      </template>
      <!--操作按钮插槽-->
      <template v-if="slots['btn-operation'] !== undefined" #btn>
        <div class="btn-operation">
          <slot name="btn-operation"></slot>
        </div>
      </template>
      <template #body>
        <el-table v-bind="$attrs" v-loading="tableLoading" :data="tableData">
          <!--表格列插槽-->
          <slot name="column"></slot>
        </el-table>
        <el-pagination
          v-if="showPage"
          v-bind="$attrs"
          style="margin-top: 16px"
          background
          v-model:current-page="pageVO.current"
          v-model:page-size="pageVO.size"
          layout="prev, pager, next, jumper, total"
          :total="dataTotal"
          :page-size="[10, 20, 30, 40]"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </template>
    </base-query-layout>
    <!--默认插槽-->
    <slot></slot>
  </div>
</template>
<script setup>
import { usePageQuery } from '@/hooks/usePageQuery';

defineOptions({
  name: 'BaseQueryPage',
});

const slots = useSlots();
// 导出查询表单对象
const queryForm = ref({});

const props = defineProps({
  // 查询接口配置
  url: {
    type: String,
    default: 'https://mock.mengxuegu.com/mock/65e708228ecfd33cdfbd688d/grace/random-data',
  },
  // 是否展示分页
  showPage: {
    type: Boolean,
    default: true,
  },
  // 额外查询参数，默认参数为form表单
  extraParams: {
    type: Object,
    default: () => {},
  },
  showQuery: {
    type: Boolean,
    default: true,
  },
});

const { methods, data } = usePageQuery({
  url: props.url,
  queryForm: queryForm.value,
  extraParams: props.extraParams,
  showPage: props.showPage,
});

const {
  handleResetForm,
  handleQueryForm,
  handleDeleteRow: _handleDeleteRow,
  getTableData: _getTableData,
  handlePageChange,
  handleSizeChange,
} = methods;
const { tableData, tableLoading, pageVO, dataTotal } = data;

const getTableData = pageNo => {
  pageVO.value.current = pageNo || pageVO.value.current;
  _getTableData();
};

const handleDeleteRow = requestConfig => {
  _handleDeleteRow(requestConfig);
};

onMounted(() => getTableData());

defineExpose({
  getTableData,
  queryForm,
  handleResetForm,
  handleQueryForm,
  handleDeleteRow,
});
</script>
<style lang="scss">
.base-query-page {
  .btn-operation {
    margin-bottom: 16px;
  }

  .el-text {
    & + .el-text {
      margin-left: 8px;
    }

    &:hover {
      cursor: pointer;
    }
  }
}
</style>
